<template>
	<view class="container">
		<u-loading-page :loading="isLoading" loading-text="加载中..."></u-loading-page>
		<view class="tabBox">
			<u-tabs :list="tabList" :current="current" @click="onTabItemClick" lineColor="#00BF5B" :activeStyle="{color:'#00BF5B'}">
			</u-tabs>
		</view>
		<view class="listBox" v-if="!isLoading">
			<no-msg-box v-if="!listArr || !listArr.length"></no-msg-box>
			<u-swipe-action v-else>
				<u-swipe-action-item :options="item.options" v-for="(item, index) in listArr" :key="index" :name="item.businessId" @click="onItemClick" >
					<view :class="item.isDelete?'collectItem deleteItem':'collectItem'" @click="onCollectItemClick(item)">
						<view class="deleteTxt" v-if="item.isDelete">
							已下架
						</view>
						<view>{{item.businessName}}</view>
						<text>{{item.businessDescriptions || '点击查看详情'}}</text>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	import {
		queryMyFavoriteList,
		canalFavorite
	} from "@/apis/product.js"
	import noMsgBox from "@/components/noMsgBox.vue"
	
	export default {
		components:{
			noMsgBox
		},
		data() {
			return {
				tabList: [{
					name: '全部',
				}, {
					name: '产品',
				}, {
					name: '场景方案'
				}],
				current:0,
				isLoading:true,
				listArr: [],
				allArr:[],
				productArr:[],
				schemeArr:[],
			};
		},
		onLoad() {
			
			// this.$forceUpdate()
		},
		onShow() {
			this.getPageList()
		},
		methods: {
			getPageList(){
				queryMyFavoriteList().then(res=>{
					if(res.code == '00000000'){
						for (let item of res.data) {
							item.options = [{
								text: '删除',
								style: {
									backgroundColor: '#E65314',
								}
							}]
						}
						this.allArr =  res.data
						this.productArr = res.data.filter(it=>{
							return it.businessType == 1
						})
						this.schemeArr = res.data.filter(it=>{
							return it.businessType == 2
						})
						
						if(this.current == 0){
							this.listArr =this.allArr
						}else if(this.current == 1){
							this.listArr =this.productArr
						}else if(this.current == 2){
							this.listArr =this.schemeArr
						}
						this.isLoading = false
					}
				})
			},
			onTabItemClick(data) {
				this.current = data.index
				if(data.name == '全部'){
					this.listArr = this.allArr
				}else if(data.name == '产品'){
					this.listArr = this.productArr
				}else if(data.name == '场景方案'){
					this.listArr = this.schemeArr
				}
			},
			onCollectItemClick(item){
				if(item.isDelete){
					return
				}
				if(item.businessType == 1){
					uni.navigateTo({
						url:`/pages/product/productDetail?id=${item.businessId}`
					})
				}else if(item.businessType == 2){
					uni.navigateTo({
						url:`/pages/scheme/schemeDetail?id=${item.businessId}&name=${item.typeName}`
					})
				}
			},
			onItemClick(data){
				this.isLoading = true
				const params = {
					businessId:'',
					businessType:''
				}
				for (let item of this.listArr) {
					if(item.businessId == data.name){
						params.businessId = data.name
						params.businessType = item.businessType
						break;
					}
				}
				
				canalFavorite(params).then(res=>{
					if(res.code == '00000000'){
						this.getPageList()
						this.isLoading = false
						uni.showToast({
							title: '删除成功',
							icon: "none",
							duration: 2000
						});
					}else{
						this.isLoading = false
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
	}

	.tabBox {
		padding-left: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.collectItem{
		padding:14rpx 0 14rpx 30rpx;
		border-bottom: 1rpx solid #FAFAFA;
		&>view{
			color: #3B384B;
			font-size: 32rpx;
			font-weight: 800;
			margin-bottom: 6rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 40rpx;
			width: 650rpx;
			display: block;
		}
		text{
			font-size: 28rpx;
			color: #9C9C9C;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			height: 40rpx;
			width: 650rpx;
			display: block;
		}
	}
	.deleteItem{
		background-color: #e4e3e3;
		position: relative;
		.deleteTxt{
			right: 30rpx;
			width: 100rpx;
			position: absolute;
			top: 35rpx;
			color: #e40b00;
			transform: rotate(30deg);
		}
	}
	.listBox{
		
		
	}
</style>
